<!--
 * @Author: your name
 * @Date: 2020-04-01 10:47:21
 * @LastEditTime: 2020-04-11 11:30:25
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-element-admin\src\views\system\organization\index.vue
 -->
<template>
  <div class="app-container">
    <el-table
      :data="routesData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="path"
      border
      default-expand-all
      :tree-props="{children: 'children'}"
    >
      <el-table-column prop="id" label="编号" sortable width="180"></el-table-column>
      <el-table-column prop="title" label="功能名" sortable width="180"></el-table-column>
      <el-table-column prop="path" label="功能地址"></el-table-column>
      <el-table-column align="center" label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-edit"
            @click="enableFunction(scope.row.id)"
          >启用</el-button>
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            @click="disableFunction(scope.row.id)"
          >停用</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import path from 'path'
import { getRoutes } from '@/api/role'
export default {
  data() {
    return {
      routesData: []
    }
  },
  created() {
    // Mock: get all routes and roles list from server
    this.getRoutes()
  },
  methods: {
    async getRoutes() {
      //从服务器获取所有的路由信息
      const res = await getRoutes()
      console.log('res111111----------', res.data)
      this.routesData = this.generateRoutes(res.data)
      console.log('res2222222----------', this.routesData)
    },
    enableFunction(id) {},
    disableFunction(id) {},
    generateRoutes(routes, basePath = '/') {
      const res = []

      for (let route of routes) {
        // skip some route
        if (route.hidden) {
          continue
        }

        const onlyOneShowingChild = this.onlyOneShowingChild(
          route.children,
          route
        )
        // console.log('onlyOneShowingChild', onlyOneShowingChild)
        if (route.children && onlyOneShowingChild && !route.alwaysShow) {
          route = onlyOneShowingChild
        }

        const data = {
          id: route.menu_id,
          path: path.resolve(basePath, route.path),
          title: route.menu_name || route.meta.title
        }

        // recursive child routes
        if (route.children) {
          data.children = this.generateRoutes(route.children, data.path)
        }
        res.push(data)
      }
      return res
    },
    onlyOneShowingChild(children = [], parent) {
      let onlyOneChild = null
      const showingChildren = children.filter((item) => !item.hidden)

      // When there is only one child route, the child route is displayed by default
      if (showingChildren.length === 1) {
        onlyOneChild = showingChildren[0]
        onlyOneChild.path = path.resolve(parent.path, onlyOneChild.path)
        return onlyOneChild
      }

      // Show parent if there are no child route to display
      if (showingChildren.length === 0) {
        onlyOneChild = { ...parent, path: '', noShowingChildren: true }
        return onlyOneChild
      }

      return false
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container /deep/ .pagination-container {
  margin-top: 0;
  padding: 16px 16px;
}
@import '~@/styles/mixin.scss';
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.createPost-container {
  position: relative;

  .createPost-main-container {
    padding: 40px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }

  .word-counter {
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}
</style>

